<template>
    <div class="word-container">
        <div class="box_title">集体和私有利用情况</div>
        <div class="wlt_quota1">
            <div class="wlt_quota_left1">
                <div class="wlt_ql_top1">总用地面积</div>
                <div class="wlt_ql_bottom1"><span>3812700</span>&nbsp;亩</div>
            </div>
            <div class="wlt_quota_right1">
                <div class="wlt_qr_top1">物业利用总面积</div>
                <div class="wlt_qr_bottom1"><span>444677</span>&nbsp;平方米</div>
            </div>
            <div class="wlt_quota_left2">
                <div class="wlt_ql_top2">总用地面积</div>
                <div class="wlt_ql_bottom2"><span>6394146</span>&nbsp;亩</div>
            </div>
            <div class="wlt_quota_right2">
                <div class="wlt_qr_top2">物业利用总面积</div>
                <div class="wlt_qr_bottom2 "><span>1709559</span>&nbsp;平方米</div>
            </div>
        </div>
        <div class="chart" id="chart_right1"></div>
    </div>
</template>

<script>
    import '@/assets/js/echarts-wordcloud.min'

    export default {
        name: "wordCloud",
        data() {
            return {
                timer: null
            }
        },
        mounted() {
            this.getEchartRight1();

        },
        methods: {
            getEchartRight1() {
                let myChart = echarts.init(document.getElementById('chart_right1'));

                let xLabel = ['蔡白村', '昌平村 ', '大岭丫村', '大罗沙村', '厚德村', '南城村', '南丫村', '小河村', '九曲村', '北永村', '永庆村 ', '创业园']
                let goToSchool = ["8", "14", "25", "3", "0", "3", "15", "6", "1", "9", "7", "9"]
                let goOutSchool =["7", "12", "16", "60", "30","9","100","39","38", "20", "12", "34"]

               const  option = {
                    tooltip: {
                        trigger: 'axis',
                        backgroundColor:'transparent',
                        axisPointer: {
                            lineStyle: {
                                color: {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [{
                                        offset: 0,
                                        color: 'rgba(126,199,255,0)' // 0% 处的颜色
                                    }, {
                                        offset: 0.5,
                                        color: 'rgba(126,199,255,1)' // 100% 处的颜色
                                    }, {
                                        offset: 1,
                                        color: 'rgba(126,199,255,0)' // 100% 处的颜色
                                    }],
                                    global: false // 缺省为 false
                                }
                            },
                        },
                        formatter: (p) => {
                            let dom = `<div style="width: 79px;
	height: 50px;;color:#fff;position: relative;">
        <svg style="position: absolute;top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);" class="svg" xmlns="http://www.w3.org/2000/svg" width="100" height="71" viewBox="0 0 84 55">
      <defs>
        <style>
          .cls-1 {
            fill: #07172c;
            fill-opacity: 0.8;
            stroke: #a7d8ff;
            stroke-linejoin: round;
            stroke-opacity: 0.2;
            stroke-width: 1px;
            fill-rule: evenodd;
          }

        </style>
      </defs>
      <path id="矩形_419" data-name="矩形 419" class="cls-1" d="M266,595h74v50H266V624.046L261,620l5-3.984V595Z"
        transform="translate(-258.5 -592.5)" />
    </svg>
        <div style="padding: 4px 8px 4px 14px;display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;position: relative;z-index: 1;">
            <div style="margin-bottom: 4px;width:100%;display:${p[0]?'flex':'none'};justify-content:space-between;align-items:center;">
                <span style="font-size:14px;color:#7ec7ff;">${p[0]?p[0].seriesName:''}</span>
                <span style="font-size:14px;color:#fff;">${p[0]?p[0].data:''}</span>
            </div>
            <div style="width:100%;height:100%;display:${p[1]?'flex':'none'};justify-content:space-between;align-items:center;">
                <span style="font-size:14px;color:#7ec7ff;">${p[1]?p[1].seriesName:''}</span>
                <span style="font-size:14px;color:#fff;">${p[1]?p[1].data:''}</span>
            </div>
        </div>
    </div>`
                            return dom
                        }
                    },
                    legend: {
                        align: "left",
                        right: '0%',
                        top:'20%',
                        type:'plain',
                        textStyle:{
                            color:'#7ec7ff',
                            fontSize:16
                        },
                        // icon:'rect',
                        itemGap:25,
                        itemWidth:18,
                        icon:'path://M0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z',

                        data: [
                            {
                                name: '集体'
                            },
                            {
                                name: '私有'
                            }
                        ]
                    },
                    grid: {
                        top: '30%',
                        left: '12%',
                        right: '5%',
                        bottom: '30%',
                        // containLabel: true
                    },
                    xAxis: [{
                        type: 'category',
                        boundaryGap: false,
                        axisLine: { //坐标轴轴线相关设置。数学上的x轴
                            show: true,
                            lineStyle: {
                                color: '#233653'
                            },
                        },
                        axisLabel: { //坐标轴刻度标签的相关设置
                            textStyle: {
                                color: '#7ec7ff',
                                padding: 16,
                                fontSize: 11
                            },
                            interval: 0,
                            rotate: 38,
                            fontSize: 10,
                            formatter: function(data) {
                                return data
                            }
                        },
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: '#192a44'
                            },
                        },
                        axisTick: {
                            show: false,
                        },
                        data: xLabel
                    }],
                    yAxis: [{
                        name: '数量',
                        nameTextStyle: {
                            color: "#7ec7ff",
                            fontSize: 16,
                            padding: 10
                        },
                        min: 0,
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: '#192a44'
                            },
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: "#233653"
                            }

                        },
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#7ec7ff',
                                padding: 16
                            },
                            formatter: function(value) {
                                if (value === 0) {
                                    return value
                                }
                                return value
                            }
                        },
                        axisTick: {
                            show: false,
                        },
                    }],
                    series: [{
                        name: '集体',
                        type: 'line',
                        symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
                        showAllSymbol: true,
                        symbolSize: 0,
                        smooth: true,
                        lineStyle: {
                            normal: {
                                width: 3,
                                color: "rgba(145,96,62,1)", // 线条颜色
                            },
                        },
                        itemStyle: {
                            color: "rgba(32,182,187,1)",
                            borderWidth: 2

                        },
                        tooltip: {
                            show: true
                        },
                        areaStyle: { //区域填充样式
                            normal: {
                                //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: "rgba(145,96,62,0)"


                                },
                                    {
                                        offset: 1,
                                        color: "rgba(145,96,62, 0)"
                                    }
                                ], false),
                                shadowColor: 'rgba(25,163,223, 0.5)', //阴影颜色
                                shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
                            }
                        },
                        data: goToSchool
                    }, {
                        name: '私有',
                        type: 'line',
                        symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
                        showAllSymbol: true,
                        symbolSize: 0,
                        smooth: true,
                        lineStyle: {
                            normal: {
                                width:3,
                                color: "rgba(32,182,187,1)", // 线条颜色
                            },
                            borderColor: 'rgba(0,0,0,.4)',
                        },
                        itemStyle: {
                            color: "rgba(145,96,62,1)",
                            borderWidth: 2

                        },
                        tooltip: {
                            show: true
                        },
                        areaStyle: { //区域填充样式
                            normal: {
                                //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: "rgba(32,182,187,0)"
                                },
                                    {
                                        offset: 1,
                                        color: "rgba(32,182,187, 0)"
                                    }
                                ], false),
                                shadowColor: 'rgba(32,182,187, 0.2)', //阴影颜色
                                shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
                            }
                        },
                        data: goOutSchool
                    }]
                };
                let len = 0
                setInterval(()=>{
                    if(len === xLabel.length){
                        len = 0
                    }
                    myChart.dispatchAction({
                        type: 'showTip',
                        seriesIndex: 0,
                        dataIndex: len,
                    })
                    len ++
                }, 1000)


                myChart.setOption(option, true);
                window.addEventListener('resize', () => {
                    myChart.resize();
                });
            },
        },
        beforeDestroy() {
            clearInterval(this.timer);
        }
    };
</script>

<style lang="scss" scoped>
    .word-container {
        .chart {
            height: 6.33rem;
        }
    }
</style>
